<template>
  <div class="page-container">
    <el-card class="order-detail-item">
      <p slot="header" class="title">订单内容</p>
      <div class="order-content-box">
        <img class="order-image" width="160px" :src="detail.image">
        <div class="order-content-detail">
          <p class="p1">订单内容</p>
          <p>订单编号：{{ detail.orderNo }}</p>
          <p>产生时间：{{ detail.createTime }}</p>
          <p>客户联系方式：{{ detail.createUserId }} {{ detail.createUserPhone }}</p>
        </div>
      </div>
    </el-card>
    <el-card class="order-detail-item">
      <p slot="header" class="title">订单明细</p>
      <pf-table
        ref="pfTable"
        :columns="columns"
        @get-table-data="getTableData"
      />
    </el-card>
    <el-card class="order-detail-item">
      <p slot="header" class="title">支付信息</p>
      <div class="order-item-box">
        <span class="order-item-info">付款方式：{{ detail.payMethod }}</span>
        <span class="order-item-info">支付流水号：{{ detail.payNo }}</span>
        <span class="order-item-info">付款时间：{{ detail.payTime }}</span>
        <span class="order-item-info">实付金额：{{ detail.payAmount | filterMoney }}</span>
      </div>
    </el-card>
    <el-card class="order-detail-item">
      <p slot="header" class="title">订单进度</p>
      <el-steps :active="step" finish-status="success" align-center>
        <el-step
          v-for="(item, index) in stepList"
          :key="index"
          :title="item.title"
          :description="item.time"
        />
      </el-steps>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getOrderDetail, getOrderProduct } from '@/api/order'

export default {
  name: 'OrderDetail',
  data() {
    return {
      detail: {},
      step: 1,
      stepList: [
        {
          title: '订单创建',
          time: '',
          status: 'success'
        },
        {
          title: '完成出票',
          status: 'process'
        },
        {
          title: '部分核销'
        },
        {
          title: '已完成'
        }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'currentEnterprise',
      'currentSite'
    ]),
    columns() {
      const attrs = { 'min-width': '150px' }
      return [
        { label: '订单编号', prop: 'orderNo', attrs },
        { label: '产品名称', prop: 'name', attrs },
        { label: '规格名称', prop: 'standardsName', attrs },
        { label: '零售价', prop: 'retailPrice', formatter: 'money', attrs },
        { label: '检验店铺', prop: 'shopName', attrs },
        { label: '产生时间', prop: 'createTime', attrs },
        { label: '状态', slot: 'chargeOfStatus', attrs }
      ]
    }
  },

  created() {
    this.id = this.$route.query.id
    this.getDetail()
  },

  methods: {

    // 获取详情
    getDetail() {
      const data = {
        id: this.id
      }
      getOrderDetail(data).then(res => {
        this.detail = res || {}
        this.stepList[0].time = this.detail.createTime
      }).catch(() => {})
    },

    getTableData({ pageNo, pageSize }, done) {
      const data = {
        pageNo,
        pageSize,
        id: this.id,
        siteId: this.currentSite.id
      }
      getOrderProduct(data).then(res => {
        done({ data: res.data || [], total: res.count || 0 })
      }).catch(() => {
        done({ data: [], total: 0 })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.order-detail-item{
  margin-bottom: 20px;
  .title{
    font-weight: bold;
  }
}
.order-content-box{
  display: flex;
  .order-image{
    width: 160px;
    margin-right: 25px;
    border-radius: 20px;
  }
  .order-content-detail{
    font-size: 16px;
    line-height: 30px;
    .p1{
      font-size: 28px;
      font-weight: 600;
      line-height: 40px;
    }
  }

}

.order-item-box{
  display: flex;
  flex-wrap: wrap;
  .order-item-info{
    line-height: 30px;
    width: 50%;
  }
}
</style>
